<template>
  <p>姓名：{{name}}</p>
  <p>年龄：{{age}}</p>
  <p>薪资：{{job.j1.salary}}k</p>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">修改年龄++</button>
  <button @click="job.j1.salary++">涨薪</button>

</template>

<script>
import {reactive,toRef,toRefs} from 'vue'
export default {
  name: 'App',
  setup(){
   
    let person = reactive({
      name:'zhangsan',
      age:21,
      job:{
        j1:{
          salary:12
        }
      }
    })
    
    return {
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
      // salary:toRef(person.job.j1,'salary')
      ...toRefs(person)
    }
  }
}
</script>

<style>

</style>
